<template>
  <div class="app-main">
    <div class="head">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="发放状态：" prop="">
          <el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 240px">
            <el-option v-for="(item, index) in statusLs" :key="index" :label="item.value" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="申请时间：" prop="">
          <el-date-picker v-model="date" start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false"
            type="datetimerange" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" style="width: 380px">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="listBox">
      <div class="listBox_head">
        <el-button type="primary" size="small" @click="handleAdd">申请商户积分</el-button>
        <export-excel-button title="申请商户积分列表" action="/platform/merchant/asset/apply/export" :params="ExportParams" />
      </div>
      <el-table v-loading="loading" :data="tableLs" stripe border>
        <el-table-column label="序号" align="center" type="index" width="64px" />
        <el-table-column label="发放积分类型" align="center" prop="assetTypeName" :show-overflow-tooltip="true" />
        <el-table-column label="申请发放账户" align="center" prop="platformWalletTypeName" :show-overflow-tooltip="true" />
        <el-table-column label="申请数量" align="center" prop="applyAmount" :show-overflow-tooltip="true" />
        <el-table-column label="已发放数量" align="center" prop="used" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="剩余发放数量" align="center" prop="usable" :show-overflow-tooltip="true" />
        <el-table-column label="申请人" align="center" prop="applyName" :show-overflow-tooltip="true" />
        <el-table-column label="发放状态" align="center" prop="status">
          <template slot-scope="scope">
            <dict-tag :options="statusLs" :value="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column label="申请目的" align="center" prop="goal" :show-overflow-tooltip="true" />
        <el-table-column label="申请时间" align="center" prop="createTime" :show-overflow-tooltip="true" />
        <el-table-column label="操作" align="center" width="240" class-name="small-padding fixed-width">

          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleView(scope.row)"
              v-if="scope.row.status == 2">发放积分</el-button>
            <el-button size="mini" type="text" @click="handleDetail(scope.row)"
              v-if="scope.row.status == 2 || scope.row.status == 4">发放明细</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>
    <!-- 添加分红日期弹窗 -->
    <add-dialog  v-if="addActivity"  :visible.sync="addActivity" @success="_handleSuccess" />
    <shop-dialog  v-if="shopActivity" :id='id' :visible.sync="shopActivity" @success="_handleSuccess" />
    <detail-dialog  v-if="detailActivity" :id='id' :visible.sync="detailActivity" @success="_handleSuccess" />
  </div>
</template>

<script>
import {
  assetApplyList
} from "@/api/integralOperation/integralAirdrop";
import addDialog from "./components/dialog";
import shopDialog from "./components/shopDialog"
import detailDialog from "./components/detailDialog"
import ExportExcelButton from "@/components/ExportExcelButton/index";
export default {
  // dicts: ['equity_card_issue_type', 'equity_card_sell_status'],
  name: "",
  components: {
    addDialog,
    shopDialog,
    detailDialog,
    ExportExcelButton
  },
  data() {
    return {
      addActivity: false,
      shopActivity: false,
      detailActivity: false,
      //日期
      date: [],
      // 遮罩层
      loading: false,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      // 总条数
      total: 0,
      // 表格数据
      tableLs: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        startApplyTime: '', //开始时间
        endApplyTime: '', //结束时间
        status: '',//分红状态 1 待分红 2 已分红 shenye_coco_bonus_status
      },
      statusLs: [], //分红状态下啦
      tableLsDetail: [],
      //分红明细总数
      totalDetail: 0,
    };
  },
  computed: {
    ExportParams() {
      const params = {
        ...this.queryParams,
      };
      return params;
    },
  },
  created() {
    this.getDictStatus();
    this.getList();
  },
  methods: {
    //获取分红状态字典
    getDictStatus() {
      var dictType = "platform_apply_status";
      this.$getSelectList(dictType)
        .then((res) => {
          this.statusLs = res.result[0].dictList;
        })
        .finally(() => { });
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      assetApplyList(this.queryParams).then(response => {
        this.tableLs = response.result.records;
        this.tableLs = this.tableLs.map(item => {
          // console.log('item',item)
          Object.keys(item).forEach(key => {
            if (item[key] === '') {
              item[key] = '-'
            }
          })
          return item
        })
        this.total = response.result.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      if (this.date) {
        this.queryParams.startApplyTime = this.date[0];
        this.queryParams.endApplyTime = this.date[1];
      }
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.date = []
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        startApplyTime: '', //开始时间
        endApplyTime: '', //结束时间
        status: '',//分红状态 1 待分红 2 已分红 shenye_coco_bonus_status
      }
      this.getList();
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.addActivity = true
    },
    /** 发放积分 */
    handleView(row) {
      this.id = row.id
      this.shopActivity = true;
    },
    /* 发放明细 */
    handleDetail(row) {
      this.id = row.id
      this.detailActivity = true
    },
    // 操作成功
    _handleSuccess(data) {
      console.log("data", data);
      this.queryParams.pageNum = 1
      this.getList();
    },
  }
};

</script>

<style scoped>
.app-main {
  padding: 20px;
}

.head {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 20px 0;
}

.listBox {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 20px;
  margin-top: 10px;
}

.listBox_head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
}
</style>